<template>
  <div ref="anchor" class="content app-content anchor-body">
    <div class="left-menu" :style="isAnchor===true?`width:92%`:``">
      <component
        :is="t.component"
        v-for="t of anchorList"
        :key="t.id"
        :init-anchor-info="initAnchorInfo"
        :shipseq="shipseq"
        :title="t.title"
        :cardstyle="cardstyle"
      ></component>
    </div>
    <div class="right-menu">
      <anchor :anchor-list="anchorList" :init-anchor-info="initAnchorInfo" :init-anchor="isAnchor" @anchorFlag="anchorFlag" />
    </div>
  </div>
</template>

<script>
// import anchor from "./components/anchor.vue";
// import info from "./components/info";
// import bginfo from "./components/bginfo";
// import ywbl from "./components/ywbl";
// import bginfof from "./components/bginfo-f";

// index.vue
import { importAll } from "@/utils/utils.js";

// 创建Context
const allFile = importAll(
  require.context("./components/", true, /\.vue$/)
);

// 生成待待注册组件集合
const componentsAll = {};
for (const key in allFile) {
  const element = allFile[key].default;
  componentsAll[element.name] = element;
}
export default {
  name: "XShipReport",
  // components: { anchor, info, bginfo,bginfof,ywbl },
  components: { ...componentsAll },
  data() {
    return {
      shipseq: "",
      initAnchorInfo: "anchor-info",
      isAnchor: false,
      info: [],// 基本信息
      cardstyle: {
        backgroundColor: "#fff",
      },
      anchorList: [
        { id: "0", title: "基本信息", component: "Info" },
        { id: "1", title: "报港信息", component: "BgInfo" },
        { id: "2", title: "业务办理", component: "YwBl" },
        { id: "3", title: "作业信息", component: "ZyInfo" },
        { id: "4", title: "装卸质量", component: "Zxzl" },
        // { id: "5", title: "场地作业", component: "BgInfoF" },
        { id: "6", title: "货权变更", component: "Hqbg" },
        { id: "7", title: "提货办理", component: "Thbl" },
        { id: "8", title: "出库方式", component: "Ckfs" },
        { id: "9", title: "计费信息", component: "Jf" },
        { id: "10", title: "图片写实", component: "Imgxs" },
        // { id: "10", title: "总结", component: "BgInfoF" },
      ],
    };
  },
  created() {
    this.shipseq = this.$route.params.shipseq
  },
  methods: {
    anchorFlag(e) {
      this.isAnchor = e
    }
  },
};
</script>

<style lang="scss">
.content {
  background-color: #f8f6f6cb;
  display: flex;
  height: 100%;
  overflow-y: auto;
  .left-menu {
    width: 99%;
  }
}
</style>
